<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button id="debounce">debounce</button>
    <button id="throttle">throttle</button>

<script>
    let el1 = document.querySelector('#debounce')
    let el2 = document.querySelector('#throttle')
    el1.addEventListener('click', debounce(ha, 2000))
    el2.addEventListener('click', debounce(ha, 1000))

    function ha() {
        console.log(1)
    }

    function debounce(func, wait) {
        let timer = null

        return function() {
            let ctx = this,
                args = arguments
            if(timer) {
                clearTimeout(timer)
                timer = null
            }
            timer = setTimeout(() => {
                func.apply(ctx, args)
            }, wait)
        }
    }

    function throttle(func, delay) {
        let curTime = Date.now()

        return function() {
            let nowTime = Date.now(),
                args = arguments
            if(nowTime - curTime >= delay) {
                func(args)
            }
        }
    }
</script>
</body>
</html>